<template>
  <div class="about">
    <!--我的书架页-->

    <!--顶部导航-->
    <van-nav-bar
      title="我的书架"
      left-text="全选"
      right-text="取消全选"
      @click-left="selectAll"
      @click-right="onCancel"
    />

    <!--页面主题内容区域-->
    <div class="wrapper">

      <van-button
        icon="plus"
        type="info"
        style="margin-right:20px"
      >
        加入分组
      </van-button>

      <van-button
        icon="delete"
        type="info"
        style="margin-right:20px"
        @click="onRemove"
      >
        移除书架
      </van-button>
      <br>
      <br>

      <!--书架列表-->
      <div
        class="box"
        v-for="book in myshelf"
        :key="book.id"
      >
        <div class="book">
          <h4>{{book.title}}</h4>
          <img v-lazy="book.picture">
          <van-checkbox v-model="book.selected">选中操作</van-checkbox>
        </div>
      </div>

    </div>

  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  methods: {
    ...mapMutations(["selectAll", "cancalSelect", "removeShelf"]),

    onCancel() {
      this.cancalSelect();
    },

    onRemove() {
      this.myshelf.forEach(item => {
        if (item.selected) {
          this.removeShelf(item);
        }
      });
    }
  },
  computed: {
    ...mapState(["myshelf"])
  }
};
</script>

<style lang="scss" scoped>
.wrapper {
  padding: 20px;
}
.box {
  width: 33%;
  height: 220px;
  float: left;
  padding: 4px;
  box-sizing: border-box;
  text-align: center;
  margin-bottom: 10px;

  .book {
    border: 1px solid gray;
    border-radius: 3px;
    height: 100%;
    text-align: center;
  }
}
</style>